<template>
	<view>
		<x-status-bar></x-status-bar>

		<view class="u-text-center" style="padding-top: 152rpx;">
			<image src="@/static/image/first/logo@2x.png" style="width: 204rpx; height: 204rpx;"></image>

			<view style="padding: 46rpx 52rpx 0;">
				<text>{{ lang_first.selectTips[0] }}</text>
				<text class="x-link font-medio"
					@click="jumpUrl(`/pages/other/richText/richText?type=privacy`)">{{ lang_once.privacy }}</text>
				<text>{{ lang_common.and }}</text>
				<text class="x-link font-medio"
					@click="jumpUrl(`/pages/other/richText/richText?type=cookie`)">{{ lang_first.selectTips[1] }}</text>
				<text>{{ lang_first.selectTips[2] }}</text>
			</view>

			<view class="u-m-t-88">
				<view v-for="(item, index) in buttons" :key="index" class="flex-center-center u-m-b-18">
					<x-common-btn width="636" height="98" :background="item.color" @click="beforeLogin(item)">
						<view class="flex-center-center">
							<image v-if="item.icon" :src="item.icon" style="width: 32rpx; height: 40rpx;" mode="heightFix"
								class="clear-flex"></image>

							<view class="u-m-l-10">{{ lang_first[item.key] }}</view>
						</view>
					</x-common-btn>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 初始化登录按钮
			return {
				buttons: [{
					key: 'account_login',
					label: '账号登录',
					image: 'account',
					color: '#FB2D2A'
				}, ]
			}
		},
		computed: {
			buttonsList() {
				return this.buttons.map(item => ({
					...item,
					icon: require(`@/static/image/first/${ item.image }_white@2x.png`)
				}))
			}
		},
		created() {
			if (0) {
				this.buttons = [{
						key: 'google_auth',
						label: 'GOOGLE 授权登录',
						image: 'google',
						color: '#34A853'
					},
					{
						key: 'facebook_auth',
						label: 'FACEBOOK 授权登录',
						image: 'facebook',
						color: '#3B5997'
					},
					...this.buttons
				]
			}
			let {
				system,
				platform
			} = uni.getSystemInfoSync()
			if (system >= 13 && platform == 'ios') {
				this.buttons.unshift({
					key: 'apple_auth',
					label: 'APPLE 授权登录',
					image: 'apple',
					color: '#333'
				})
			}
		},
		methods: {
			// 根据不同按钮执行
			beforeLogin(item) {
				if (item.key === 'account_login') {
					this.jumpUrl('/pages/first/login/login')
				} else {
					uni.login({
						provider: 'facebook',
						success: function(loginRes) {
							console.log(loginRes)
							// 登录成功
							uni.getUserInfo({
								provider: 'facebook',
								success: function(info) {
									console.log(info)
									// 获取用户信息成功, info.authResult保存用户信息
								}
							})
						},
						fail: function(err) {
							// 登录授权失败  
							// err.code是错误码
							console.log(err)
						}
					});
					// this.jumpUrl(`/`)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.x-link {
		text-decoration: underline;
	}
</style>
